<template>
  <div class="h-full bg-slate-50 p-6">

    <div class="text-center mb-6 p-6 bg-white rounded-lg shadow-sm">
      <h2 class="flex items-center justify-center gap-3 text-2xl font-semibold text-gray-800 mb-2">
        <n-icon class="text-3xl text-blue-500" :component="ArchiveOutline" />
        <span>编辑党支部基本信息</span>
      </h2>
      <p class="text-gray-500">请在此处更新党支部的核心信息</p>
    </div>

    <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
      <div class="flex items-center gap-3 mb-3">
        <n-icon class="text-xl text-blue-600" :component="InformationCircleOutline" />
        <h3 class="text-md font-semibold text-blue-800">编辑提示</h3>
      </div>
      <div class="space-y-2 text-sm text-blue-700">
        <p>• 请确保党支部名称与官方文件保持一致。</p>
        <p>• 支部类型一旦选定，通常不建议频繁更改。</p>
        <p>• 描述信息将帮助其他成员快速了解该支部的基本情况。</p>
      </div>
    </div>

    <n-card class="rounded-lg shadow-sm" :bordered="false">
      <template #header>
        <div class="flex items-center gap-3">
          <n-icon class="text-xl text-blue-500" :component="CreateOutline" />
          <span class="text-lg font-semibold text-gray-800">支部基础信息</span>
        </div>
      </template>

      <n-form ref="formRef" :model="formValue" :rules="rules" label-placement="top">
        <n-grid :cols="24" :x-gap="24">
          <n-form-item-gi :span="24" label="党支部名称" path="branchName">
            <n-input v-model:value="formValue.branchName" placeholder="请输入党支部名称" />
          </n-form-item-gi>

          <n-form-item-gi :span="24" label="党支部类型" path="branchType">
            <n-select
              v-model:value="formValue.branchType"
              :options="branchTypeOptions"
              placeholder="请选择党支部类型"
            />
          </n-form-item-gi>

          <n-form-item-gi :span="24" label="描述" path="branchDescription">
            <n-input
              v-model:value="formValue.branchDescription"
              type="textarea"
              :rows="4"
              placeholder="请输入党支部描述信息"
            />
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </n-card>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NCard,
  NGrid,
  NFormItemGi,
  NIcon
} from 'naive-ui';
// 新增 ArchiveOutline 图标的导入
import { CreateOutline, InformationCircleOutline, ArchiveOutline } from '@vicons/ionicons5';

const props = defineProps({
  branchData: {
    type: Object,
    required: true,
  }
});

const formRef = ref(null);
const formValue = ref({
  branchName: '',
  branchType: null,
  branchDescription: ''
});

// 表单验证规则 (保持不变)
const rules = {
  branchName: [
    { required: true, message: '请输入党支部名称', trigger: 'blur' }
  ],
  branchType: [
    { required: true, message: '请选择党支部类型', trigger: 'change' }
  ]
};

// 选项数据 (保持不变)
const branchTypeOptions = [
  { label: '本科生党支部', value: '本科生党支部' },
  { label: '硕士研究生党支部', value: '硕士研究生党支部' },
  { label: '博士研究生党支部', value: '博士研究生党支部' },
  { label: '教职工党支部', value: '教职工党支部' },
  { label: '混合党支部', value: '混合党支部' },
];

// 初始化表单数据 (保持不变)
onMounted(() => {
  if (props.branchData) {
    formValue.value = {
      branchName: props.branchData.branchName || '',
      branchType: props.branchData.branchType || null,
      branchDescription: props.branchData.branchDescription || '',
    };
  }
});

/**
 * @description 暴露给父组件的方法：先校验表单，如果成功则返回表单数据，否则返回 null
 * @returns {Promise<Object|null>}
 */
const validateAndGetData = async () => {
  try {
    await formRef.value?.validate();
    // 验证通过，返回最新的表单数据
    return formValue.value;
  } catch (errors) {
    console.warn("表单验证失败:", errors);
    // 验证失败，返回 null
    return null;
  }
};

// 通过 defineExpose 将方法暴露出去
defineExpose({
  validateAndGetData
});
</script>